import React from 'react'
import {useState,useEffect} from "react"
import axios from 'axios'
// react 从16.8之后推出了hooks，让函数组件可以声明自己的状态，也可以模拟出声明周期
// react-vant 大量使用了hooks写法，所以讲一下hooks，要不复制都看不懂
function Fun() {
   let [name,setName] = useState("ZHANGSAN")
   let [arr,setArr] = useState([])
   // useEffect通常用来模拟类组件的componentDidMounted
   // 如果只想让useEffect执行一次，第二个参数就是空数组
   useEffect(()=>{
      axios.get("https://baojia.chelun.com/v2-car-getMasterBrandList.html").then(res=>{
          console.log(res)
          setArr(res.data.data) // 和setState 是一个异步的
      })
   },[])
  // useEffect 还可以当vue里的watch来使用
  // 如果我想要拿到最新的arr最新的值，因为 setArr是异步的，我在第一个useEffect里拿不到，
  // 所以我又写了一个useEffect，，在这个useEffect里来获取arr最新的值
  useEffect(()=>{
         if (arr.length == 0 ) {
            return 
         } 
         console.log(arr)
  },[arr])
  return (
    <div>
        <hr />
        <span>{name}</span>
        <button onClick={()=>{setName("lisi")}}>点击</button>
        {
            arr&&arr.length?arr.map((item,index)=>{
                return <p key={index}>{item.Name}</p>
            }):""
        }
    </div>
  )
}
export default Fun
